<template>
 <div class="products">
  <div class="box">
   <h6>{{ $t('home.products.title') }}</h6>

   <el-row :gutter="12" class="iconTable">
    <el-col v-for="(item, index) of list" :key="index" :span="7">
     <el-card shadow="hover">
      <img :src="item.image" alt="">

      <h6>{{ item.name }}</h6>

      <el-button type="primary" @click="onUrl(item.path)">{{ item.button }}</el-button>
     </el-card>
    </el-col>
   </el-row>
  </div>
 </div>
</template>

<script>
export default {
 name: "Products",
 data: () => ({
  list: [
   {
    name: 'Convert',
    image: require('@/assets/product_1.png'),
    button: 'Trade',
    path: '/Convert'
   },
   {
    name: 'Mining',
    image: require('@/assets/product_2.png'),
    button: 'Deposit',
    path: '/Mining'
   },
   {
    name: 'Assets Custody',
    image: require('@/assets/product_3.png'),
    button: 'Custody',
    path: '/Custody'
   },
  ]
 }),
 created() {
  this.onChange()
 },
 methods: {
  // 切换语言
  onChange () {
   const lang = [
    {
     name: this.$t('home.products.name1'),
     button: this.$t('home.products.button1')
    },
    {
     name: this.$t('home.products.name2'),
     button: this.$t('home.products.button2')
    },
    {
     name: this.$t('home.products.name3'),
     button: this.$t('home.products.button3')
    }
   ];
   this.list.forEach((item, index) => {
    item.name = lang[index].name;
    item.button = lang[index].button;
   })
  },

  // 跳转链接
  onUrl(e) {
   this.$router.push({
    path: e
   })
  }
 },
 watch:{
  '$i18n.locale' (a,b){
   this.onChange()
  }
 }
}
</script>

<style scoped lang="scss">
.products {
 width: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 100px 0;

 .box {
  max-width: 935px;
  width: 95%;
  display: flex;
  flex-direction: column;

  >h6 {
   font-size: 35px;
   text-align: center;
   color: #002445;
   margin: 0 auto 60px;
   border-bottom: 3px solid #0d4fa5;
   padding: 0 40px 10px;
  }

  .iconTable {
   display: flex;
   flex-wrap: wrap;

   .el-col {
    &:nth-of-type(2) {
     margin: auto;
    }

    .el-card {
     border: none;
     padding: 40px 20px;

     /deep/ .el-card__body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      img {
       margin: 20px 0;
       width: 84px;
      }

      h6 {
       margin-top: 15px;
       color: #002445;
       font-size: 16px;
       min-height: 40px;
      }

      .el-button {
       background-color: #0D4FA5;
       color: #fff;
       padding: 6px 0;
       width: 150px;
       text-align: center;
       margin: 40px auto 0;
       border-radius: 4px;
       font-size: 16px;
       height: 38px;
       border: none;
      }
     }
    }
   }
  }
 }
}
</style>
